<summary>: 概要明示要素

<details>
  <summary>
    キーはありますが、ドアはありません。スペースはありますが、部屋はありません。入れることはできますが、出すことはできません。これは何でしょう？
  </summary>
  キーボードです。
</details>

details {
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
}

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #aaa;
  margin-bottom: 0.5em;
}

<details open>
  <summary>概要</summary>
  <ol>
    <li>現金: $500.00</li>
    <li>現在の請求書: $75.30</li>
    <li>期限: 2019/05/06</li>
  </ol>
</details>

<details open>
  <summary><h4>概要</h4></summary>
  <ol>
    <li>現金: $500.00</li>
    <li>現在の請求書: $75.30</li>
    <li>期限: 2019/05/06</li>
  </ol>
</details>

<details open>
  <summary><strong>概要</strong></summary>
  <ol>
    <li>現金: $500.00</li>
    <li>現在の請求書: $75.30</li>
    <li>期限: 2019/05/06</li>
  </ol>
</details>

details {
  font-size: 1rem;
  font-family: "Open Sans", Calibri, sans-serif;
  border: solid;
  padding: 2px 6px;
  margin-bottom: 1em;
}

details:first-of-type summary::marker,
:is(::-webkit-details-marker) {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

details[open]:first-of-type summary::marker {
  content: "− ";
}

details:last-of-type summary {
  list-style: none;
  &::after {
    content: "+";
    color: white;
    background-color: darkgreen;
    border-radius: 1em;
    font-weight: bold;
    padding: 0 5px;
    margin-inline-start: 5px;
  }
  [open] &::after {
    content: "−";
  }
}
details:last-of-type summary::-webkit-details-marker {
  display: none;
}

<h1>ヘレン・ケラーの名言</h1>

<details>
  <summary>女性の権利について</summary>
  <p>
    <q>私たちは、騎士道精神から、男性が女性に平等な権利を与え、国家の事務に女性をパートナーとして迎えることを期待して、投票を祈願し、説得し、懇願してきました。私たちは、彼らの常識が偏見や愚かさを打ち負かすことを期待していました。彼らの自慢の正義感が、人間の精神をしばしば束縛する誤りを克服するだろうと考えていました。しかし、私たちは常に手ぶらで立ち去らざるを得ませんでした。私たちはもう懇願しません。</q>
  </p>
</details>

<details>
  <summary>楽観主義について</summary>
  <p>
    <q>楽観主義とは、達成につながる信念です。期待がなければ、何もできません。</q>
  </p>
</details>